body{
  background-color:#CCCCCC;	/*灰色，写background也可以*/
  margin:0px;
  font-size:12px;
  font-family:Arial;
}
#container{
	margin:0px auto;	/*上下外边距0px,左右外边距=浏览器显示宽度减去容器宽度再平分*/
	width:800px;
	/*text-align:left;
	background-color:#FF3366;	桃粉色*/
}
#banner{
	/*background:#cf0;	浅黄色*/
	width:100%;		/*宽度为container的宽度，500px*/
	height:145px;
}
#globllink{
	width:100%;	
	/*background:#909;	紫色,宽度为container的宽度，800px */		
}
#globllink ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
}
#globllink ul li{
	/*display:block;	li已经是块级标签了不必设置block*/
	float:left;
	/*padding:4px 0px;     也可一直用width设置每个li之间的间隔*/
	text-align:center;
	width:80px;
}
#globllink ul li a{
	color:#ffffff;
	text-decoration:none;
	display:block;		/*相反的是inline   注意：因为超链接属于行级标签，在设置背景、大小时，必须先转成块级标签 */
	padding:10px 0;
	background:url("globllink.jpg") no-repeat;
}
#globllink a:link,#globllink a:visited{
	color:#F00;
	text-decoration:none;
}
#globllink a:hover{
	text-decoration:underline;
	background:url("globllink-2.jpg")
}
#left{
	padding:0px 2px;	/*如果左右、上下同宽，可以直接写padding:0px 2px;  */
	width:200px;	/*宽度为100px*/
	background:#ffffff;	
	float:left;
}
#weather{
	background:url("天气.jpg") no-repeat;
	height:150px;
}
#weather h3{
	font-size：12px;
	color:#FF0;
	padding:15px 10px 0px 70px;		/*作用：处理“天气查询”四字的位置*/
	margin:2px 0px 0px 0px;	/*会发现，只有设置h3标签时整个天气div块级元素才会上浮,可见h3标签应该是默认有外边距的*/
}
#weather ul{
	list-style-type:none;	/*是在ul内设置去掉圆点而不是li*/
	margin:15px 10px 0px 0px;
	padding:0px;	/*实验可知对于ul样式，margin和padding默认是不为0的，所以要再特别声明数值*/
} 
#weather ul li{
	background:url("箭头.jpg") no-repeat 5px 0px;		/*设置图标的位置。实验可知，对于li,其样式margin的默认为0。如果用于#weather ul则只显示一个图标*/
	padding:0px 0px 0px 27px;	/*设置字体内容的位置*/
}
#nice h3{
	/*display:block;	并不需要转化成块级就可设置背景，可见h标签也是块级标签*/
	background:#0FF url("箭头.jpg") no-repeat 5px 7px;		/*同时还可将字体的背景色加到h标签上(黄色)*/
	margin:2px 0px 0px 0px;		/*实验发现，对于h标签margin默认并不为0，但padding默认为0*/
	padding:10px 30px 10px 25px;
	color:#000000;
}
#nice img{
	border:2px solid #ffffff;/*设置边框时，需要加入margin属性*/
	margin:2px;
}
#nice ul{
	list-style-type:none;
	background:#9F9;  /*今日推荐下内容模块的背景青黄色*/
	margin:2px 0px;
	padding:20px 10px;
	text-align:center;
	height:390px;	/*这是最后为了左中右三块平行而调整的数值*/
}
#nice ul li{
	padding:8px;
	/*或height:130px;	根据nice ul{}最后的数值而为了让排列更美观最后设定的值*/
}
#middle{
	background:#FFF;	/*白色*/
	width:400px;	/*宽度*/
	/*height:300px;	*/
	float:left;
}
/*注释
#middle beauty{
	 background:url("middle-1.jpg") no-repeat;
}	middle和beauty均属于id选择器类名，这样书写将无法正常工作。组合方式只能为“类名+标签”	*/
#dog img{
	border:2px solid #ffffff;
	width:396px;
	
}
#beauty h3{		/*可以和route h3一起定义从而简化代码量，用#middle h3{}*/
	background:url("middle-1.jpg") no-repeat;
	/*text-align:center;  */
	color:#F00;
	height:30px;	/*可见height有个默认值*/
	padding:10px 50px 0px 50px;	/*因为文字占用了上+下=0px+10px,所以若要保持与下方的距离为0px时，只需要对高度height进行调整(30px以内,因为背景图的高为40px)*/
	margin:0px;
}
#beauty ul,#route ul{
	list-style-type:none;
	margin:8px 0px;
	padding:0px;	/*ul的margin和padding默认不为0*/
}
#beauty ul li{
	float:left;
	width:95px;
	text-align:center;	/*写成margin:10px;也可以*/
	/*border:#09F solid 1px; 加在这里的话就会把图片之外的边框都连起来*/
}
#beauty ul li img{
	border:#09F solid 1px;
}
#route h3{		/*可以和beauty h3一起定义从而简化代码量，用#middle h3{}*/
	background:url("middle-2.jpg") no-repeat;
	height:26px;
	clear:both;	/*清除#beauty ul li的浮动*/
	color:#0F0;
	padding:10px 2px 0px 50px;
	margin:0px;
}
#route ul{
	background:#09F;
	margin:0px 2px;
	padding:20px 0px 30px 30px;	/*箭头的位置统一在这里设置好了，如果不单独开设#route ul{}将会很乱*/
	/*我们设的上下边距padding=20px和30px（也可用height:110px）是根据最后左右两块的情况,希望底部对齐而调整的数值*/
}
#route ul li{
	background:url("箭头.jpg") no-repeat;	 /*5px 10px;调整箭头的位置可在这里微调，但不建议还是用上面的好*/
	padding:0px 0px 5px 30px;	/*字体内容的位置*/
}
#route ul li a:link,#route ul li a:visited{
	color:#eeeeee;
	text-decoration:none;
}
#route ul li  a:hover{		/*必须写全，不然没有效果，例如#route li a:hover也将不显示效果*/
	color:#06F;
	text-decoration:underline;
}
#right{
	width:196px;	/*总宽为：100px+2x10px=120px*/
	background:#09F;	/*蓝色*/
	float:left;			/*中间部分的div布局需要将#left/#middle/#right全设置为左浮动，才会以并列在一起*/
}
/*因为id为good/food/hotel的h3标签样式一样，所以可以一次性全部设置*/
#right div h3{
	background:#0CC url("箭头.jpg") no-repeat 7px 7px;/*可见对于h不能用background:#0CC 10px 3px;来定义位置,图片才行*/
	padding:8px 0px 5px 30px;
	margin:0px;	/*可见margin的默认值并不为0*/
	color:#CF0;
}
#good ul{
	list-style-type:none;
	text-align:center;
	margin:0px;	/*可见margin默认是不为0的*/
	padding:5px 6px 0px 6px;	/*箭头的位置应该在这里设置而不是#good ul li*/
}
#good ul li{
	padding:5px 0px; /* 亦可height:130px;	来调整每个li之间的间隔*/
}
#good img{
	border:1px solid #0CC;
}
/*#food h3{
	background:#0CC;
	margin:0px;
	padding:8px 0px 5px 30px; 已经统一设置过了无需重复*/
}
#food ul,#hotel ul{	/*统一设置简化代码量*/
	padding:5px 5px 5px 15px;	/*箭头的位置*/
	margin:5px; /*margin的值默认不为0*/
}
#food ul li,#hotel ul li{	/*统一设置简化代码量*/
	list-style-type:none;
	background:url("箭头.jpg") no-repeat 0px 0px;
	padding:0px 0px 5px 25px;	/*字体内容的位置,有时候padding需要一定距离否则箭头会只显示一部分*/
	border-bottom:1px dashed #eeeeee;
}
#food ul li a:link,#food ul li a,#hotel ul li a:link,#hotel ul li a:visited{
	color:#eeeeee;
	text-decoration:none;
}
#food ul li a:hover,#hotel ul li a:hover{
	color:#06F;
	text-decoration:underline;
}
{
	
}
#footer{
	text-align:center;
	width:100%; 
	background:#06F;	
	clear:both;		/*设置清除,both表示清除左右浮动，否则将被footer块会被遮挡住*/	
	padding:4px 0px;	/*当padding：20px时，footer块将会向容器外伸出40px*/
}
